<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kafka WebSocket Visualization (Cumulative with Charts)</title>

  <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    .container { display: flex; flex-wrap: wrap; gap: 20px; }
    .chart-container { width: 48%; height: 400px; }
  </style>
</head>
<body>
  <h1>Kafka WebSocket Visualization (Cumulative)</h1>
  <div class="container">
  <!-- 图表 3: 累计展示在籍和不在籍男女生人数 -->
  <div class="chart-container" id="in-school-status-chart"></div>
  </div>
  <script>
    const socket = io('http://localhost:5000');
    // 初始化 ECharts 图表实例
    const inSchoolStatusChart = echarts.init(document.getElementById('in-school-status-chart'));
    // 图表配置
    const inSchoolStatusChartOption = {
    title: { text: '累计在籍和不在籍男女生人数', left: 'center' },
    tooltip: { trigger: 'axis' },
    legend: { top: 'bottom' },
    xAxis: { type: 'category', data: ['在籍男', '在籍女', '不在籍男', '不在籍女'] },
    yAxis: { type: 'value' },
    series: [
      { name: '人数', type: 'bar', data: [0, 0, 0, 0] }
    ]
    };
    inSchoolStatusChart.setOption(inSchoolStatusChartOption);

// 累计数据处理函数
if (introduction.includes('统计在籍和不在籍男女生人数')) {
  const match = result.match(/InSchool - Male: (\d+), Female: (\d+); NotInSchool - Male: (\d+), Female: (\d+)/);
  if (match) {
    cumulativeData.inSchoolStatus.inSchool.male += parseInt(match[1], 10);
    cumulativeData.inSchoolStatus.inSchool.female += parseInt(match[2], 10);
    cumulativeData.inSchoolStatus.notInSchool.male += parseInt(match[3], 10);
    cumulativeData.inSchoolStatus.notInSchool.female += parseInt(match[4], 10);

    inSchoolStatusChartOption.series[0].data = [
      cumulativeData.inSchoolStatus.inSchool.male,
      cumulativeData.inSchoolStatus.inSchool.female,
      cumulativeData.inSchoolStatus.notInSchool.male,
      cumulativeData.inSchoolStatus.notInSchool.female
    ];
    inSchoolStatusChart.setOption(inSchoolStatusChartOption);
  }
}
    </script>
</body>
</html>